<template>
  <div class="scene-container">
    <div class="scene-list">
      <div
        v-for="(item, index) in sceneList"
        :key="index"
        :class="{'scene-list-item-select':item.sceneId == sceneSelectId}"
        class="scene-list-item"
        @click="selectScene(item, index)"
      >{{ item.name }}</div>
    </div>
    <div class="handle-interval">
      <flexbox class="handle-button" @click.native="addScene">
        <i class="wk wk-add handle-button-icon" />
        <div class="handle-button-name">新建场景</div>
      </flexbox>
      <flexbox class="handle-button" @click.native="setScene">
        <i class="wk wk-manage handle-button-icon" />
        <div class="handle-button-name">管理</div>
      </flexbox>
    </div>
  </div>
</template>

<script type="text/javascript">
import crmTypeModel from "@/views/crm/model/crmTypeModel";
import { mapGetters } from "vuex";
import { crmSceneIndexAPI } from "@/api/crm/common";

export default {
  name: "SceneList", // 学员管理下 重要提醒 回款计划提醒
  components: {},
  props: {
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 场景列表
      sceneSelectId: -1,
      sceneList: []
    };
  },
  computed: {
    ...mapGetters(["crm"])
  },
  watch: {},
  mounted() {
    if (this.crm[this.crmType].index) {
      this.getSceneList();
    }
  },
  methods: {
    getSceneList() {
      // console.log(crmTypeModel[this.crmType]);
      if (crmTypeModel[this.crmType] == 77 || crmTypeModel[this.crmType] == 20 || crmTypeModel[this.crmType] == 99 || crmTypeModel[this.crmType] == 100 || crmTypeModel[this.crmType] == 101 || crmTypeModel[this.crmType] == 102 || crmTypeModel[this.crmType] == 103|| crmTypeModel[this.crmType] == 104|| crmTypeModel[this.crmType] == 105 || crmTypeModel[this.crmType] == 106) {
        //roi没有场景
        this.$emit("scene", { id: "", name: "", bydata: "" });
        return;
      }
      crmSceneIndexAPI({
         type: this.crmType=='vipStudents'?19:crmTypeModel[this.crmType]
      })
        .then(res => {
          const defaultScenes = res.data.filter(function(item, index) {
            return item.isDefault === 1;
          });

          if (defaultScenes && defaultScenes.length > 0) {
            const defaultScene = defaultScenes[0];
            this.sceneSelectId = defaultScene.sceneId;
            this.$emit("scene", {
              id: defaultScene.sceneId,
              name: defaultScene.name,
              bydata: defaultScene.bydata || ""
            });
          } else {
            this.sceneSelectId = "";
            this.$emit("scene", { id: "", name: "", bydata: "" });
          }

          this.sceneList = res.data;
        })
        .catch(() => {
          this.$emit("scene", { id: "", name: "", bydata: "" });
        });
    },

    // 选择场景、
    selectScene(item, index) {
      this.sceneSelectId = item.sceneId;
      this.$emit("scene", {
        id: item.sceneId,
        name: item.name,
        bydata: item.bydata
      });
      this.$emit("hidden-scene");
    },
    // 添加场景
    addScene() {
      this.$emit("scene-handle", { type: "add" });
    },
    // 设置场景
    setScene() {
      this.$emit("scene-handle", { type: "set" });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.scene-container {
  position: relative;
  width: 180px;
}

.scene-list {
  max-height: 240px;
  overflow-y: auto;
  font-size: 12px;
  margin-bottom: 10px;
  .scene-list-item {
    color: #333;
    padding: 10px 15px;
    cursor: pointer;
    background-color: white;
  }
  .scene-list-item:hover {
    background-color: #f7f8fa;
    color: $xr-color-primary;
  }

  .scene-list-item-select {
    color: $xr-color-primary;
    background-color: #f7f8fa;
  }
}

.handle-button {
  padding: 6px 20px;
  font-size: 12px;
  cursor: pointer;
  color: $xr-color-primary;
  .handle-button-icon {
    margin-right: 8px;
  }
  .handle-button-name {
    font-size: 12px;
  }
}
.handle-button:hover {
  .handle-button-name {
    text-decoration: underline;
  }
}

.handle-interval {
  border-top: 1px solid #efefef;
}
</style>
